<template>
    <div class="latestPage flex_column">
        <div class="flex_between">
            <div class="selectVue flex">
                <el-select v-model="currentWeChat.currentUserWechatName" placeholder="选择微信AI客服" style="width: 200px;" @change="weChatChange">
                    <el-option v-for="item in weChatList" :key="item.id" :label="item.wechatName" :value="item"></el-option>
                </el-select>
                <el-select v-model="categoryName" placeholder="选择分组" style="width: 200px; margin-left: 10px;" @change="categoryChange" clearable>
                    <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item"></el-option>
                </el-select>
                <el-select v-model="tag" placeholder="选择标签" style="width: 200px; margin-left: 10px;" @change="tagChange" clearable>
                    <el-option v-for="item in tagList" :key="item" :label="item" :value="item"></el-option>
                </el-select>
                <el-input v-model="key" placeholder="搜索私聊好友" style="margin-left: 10px; width: 200px;" :clearable="true" @input="searchFun"></el-input>
            </div>
            <!-- <div class="btnVue" @click="$jump('report')">报表设置</div> -->
        </div>
        
        <!-- 跟进列表 -->
        <div class="latestContent flex_1">
            <el-table :data="list" height="100%" border width="100%" class="center-table">
                <!-- 列表为空 -->
                <div slot="empty" class="flex_column align_center">
                    <img src="../../assets/empty.png" slot="empty" style="width: 313px; height: 172px; margin-bottom: 20px">
                    <span style="color: #101010; font-weight: 600; font-size: 18px">当前列表是空哦~</span>
                </div>

                <!-- 微信名 -->
                <el-table-column prop="friendWechatName" label="微信名" width="160" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span style="font-size: 13px;">{{ scope.row.type===0 ? scope.row.friendWechatName : scope.row.groupName }}</span>
                    </template>
                </el-table-column>

                <!-- 备注 -->
                <el-table-column prop="friendWechatRemark" label="备注" width="160" :show-overflow-tooltip="true"></el-table-column>

                <!-- 标签 -->
                <el-table-column prop="tag" label="标签" width="150">
                    <template slot-scope="scope">
                        <div v-if="scope.row.tag">
                            <div v-for="(item, index) in scope.row.tag.split(',')" :key="index">
                                <el-tag type="info" size="mini" v-if="item">{{ item }}</el-tag>
                            </div> 
                        </div>
                    </template>
                </el-table-column>

                <!-- AI总结 -->
                <el-table-column label="AI总结">
                    <template slot-scope="scope">
                        <div v-if="scope.row.summary">
                            <div class="aiItem text_center" v-for="(item, index) in scope.row.summary.split('。')" :key="index">{{ item }}</div> 
                        </div>
                    </template>
                </el-table-column>

                <!-- 分组 -->
                <el-table-column prop="categoryName" label="分组" width="150"></el-table-column>

                <!-- 手机号 -->
                <el-table-column prop="remarkPhone" label="手机号" width="120"></el-table-column>

                <!-- 最后聊天时间 -->
                <el-table-column prop="lastSendTime" label="最后聊天时间" width="150">
                    <template slot-scope="scope">
                        <span style="font-size: 13px">{{ formatTimeFun(scope.row.lastSendTime) }}</span>
                    </template>
                </el-table-column>

                <!-- 自动回复 -->
                <!-- <el-table-column prop="state" label="自动回复" :show-overflow-tooltip="true" width="80">
                    <template slot-scope="scope">
                        <div class="state" :class="{active: scope.row.automaticResponse}" @click="handleStatus(scope.row)">
                            <div class="dot dot_right" v-if="scope.row.automaticResponse===1"></div>
                            <div class="dot dot_left" v-else></div>
                        </div>
                    </template>
                </el-table-column> -->

                <!-- 操作 编辑 删除 -->
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="flex_center">
                            <el-button size="mini" type="edit" @click="handleEdit(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="show" @click="handleToChat(scope.row)">查看聊天</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="paginationVue flex_center align_center">
            <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
        </div>

        <!-- 编辑 -->
        <editVue :dialogTableVisible="dialogTableVisible" ref="editChild" @beforeClose="dialogTableVisible=false" @callback="getList"></editVue>
    </div>
</template>

<script>
import { mapState } from "vuex"
import { formatTime } from "@/common/tools.js"
import editVue from "./components/edit.vue"
export default {
    components: {
        editVue
    },
    data(){
        return {
            key: "",
            list: [],
            total: 0,
            pageNum: 1,
            pageSize: 15,
            categoryName: "",
            categoryId: "",
            categoryList: [],
            tag: "",
            isEmpty: false,
            dialogTableVisible: false,
            tagList: ["高意向","中意向","低意向","了解产品详情", "询问价格", "询问使用方法", "询问发货时间", "询问售后服务", "非常满意", "满意", "一般", "不满意", "非常不满意", "产品质量", "发货时间", "售后服务", "使用问题", "价格问题", "新客户", "忠实客户", "活跃", "潜在", "流失"],
            loading: false,
            id: ""
        }
    },
    created(){
        this.getCategoryList()
    },
    mounted(){
        this.getList()
    },
    computed: {
        ...mapState({
            currentWeChat: state=> state.currentWeChat,
            weChatList: state=> state.weChatList,
        })
    },
    watch: {
        key(){
            if(!this.key) {
                this.pageNum = 1
                this.getList()
            }
        }
    },
    methods: {  
        // 分组筛选  
        categoryChange(e){
            console.log(e)
            this.categoryId = e.id
            this.categoryName = e.name
            this.pageNum = 1
            this.getList()
        },

        // 标签筛选
        tagChange(e){
            this.tag = e
            this.pageNum = 1
            this.getList()
        },

        // 微信筛选
        weChatChange(e){
            if(this.currentWeChat.currentWeChatId===e.id) return
            let obj = this.currentWeChat
            obj.currentWeChatId = e.id
            obj.currentUserWechatName = e.wechatName
            obj.currentOnLineStatus = e.status
            this.$store.state.currentWeChat = obj
            this.pageNum = 1
            window.sessionStorage.setItem("currentWeChatId", e.id)
            window.sessionStorage.setItem("currentUserWechatName", e.wechatName)
            window.sessionStorage.setItem("currentOnLineStatus", e.status)
            setTimeout(() => {
                this.getList()
            }, 200);
        },

        formatTimeFun(value){
            if(!value) return
            return formatTime(value*1000, "YMDHMS")
        },
        
        // 获取跟进列表
        getList(){
            this.$post("/front/wechat/friend/friendList", {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                userWechatPrimaryId: this.currentWeChat.currentWeChatId,
                content: this.key,
                categoryId: this.categoryId || "",
                tag: this.tag,
                userWechatName: this.currentWeChat.currentUserWechatName,
                type: 0,
            }).then(res=>{
                if(res.data.code===0) {
                    this.list = res.data.obj.list
                    this.total = res.data.obj.total
                }
            })
        },

        // 搜索关键字
        searchFun(){
            if(!this.key) return
            this.pageNum = 1
            this.getList()
        },

        // 打开编辑弹框
        handleEdit(id){
            this.dialogTableVisible = true
            this.$refs.editChild.getFriendDetail(id)
            this.$refs.editChild.getCategoryList()
        },

        // 查看聊天
        handleToChat(item){
            this.$store.state.currentChat = item
            this.$parent.defaultActive = "chatting"
            this.$store.state.history = []
            this.$router.push({name: "chatting", query: {
                key: item.type=== 0 ? item.friendWechatName : item.groupName,
            }})
        },

        // 翻页
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageNum = val
            this.getList()
        },

        // 获取分组列表
        getCategoryList(){
            this.$post("/front/wechat/friend/categoryList").then(res=>{
                if(res.data.code===0) {
                    this.categoryList = res.data.obj
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
:deep(.el-button--delete) {
    background: #d81e06;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #AAA;
    span {
        color: #fff !important;
    }
}
:deep(.center-table td), 
:deep(.center-table th) {
  text-align: center !important;
}
:deep(.el-table .cell) {
    font-size: 13px !important;
}
:deep(.center-table th) {
  background: #f5f5f5 !important;
}
:deep(.el-button--show) {
    background: #0147fd;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--edit) {
    background: #67C23A;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--sure) {
    background: #0147fd;
    height: 40px;
    margin-top: 8px;
    margin-left: 10px;
    span {
        color: #fff !important;
    }
}
:deep(.el-button--cancel) {
    background: #AAA;
    margin-top: 8px;
    height: 40px;
    span {
        color: #fff !important;
    }
}
:deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #0147fd;
    background: #0147fd;
}
:deep(.el-radio__input.is-checked+.el-radio__label) {
    color: #0147fd;
}
:deep(.el-dialog) {
    width: 500px;
    height: auto;
    border-radius: 10px;
}
:deep(.el-dialog__title) {
    color: #111;
    font-size: 16px;
    font-weight: 600;
}
:deep(.el-dialog__header) {
    padding: 20px 0 0;
}
:deep(.el-dialog__body) {
    padding: 0 30px 30px;
}
:deep(.el-tag--info) {
    margin: 5px 0 5px;
    color: #333;
    font-size: 11px;
}
.el-dropdown-menu::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
}
:deep(.el-icon-circle-close) {
    font-size: 18px !important;
    color: #409EFF !important;
}
.latestPage {
    width: 100%;
    height: 100%;
    padding: 20px 20px 0;
    .aiItem {
        font-size: 13px; 
        padding: 5px 0 5px;
        text-align: center; 
        line-height: 1.4;
        color: #333;
    }
    .selectVue {
        width: 100%;
        height: 40px;
        .btn {
            width: 80px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border-radius: 5px;
            background: #0147fd;
            color: #fff;
            margin-left: 10px;
            cursor: pointer;
        }
    }
    .btnVue {
        width: 100px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 5px;
        background: #0147fd;
        color: #fff;
        margin-left: 10px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .latestContent {
        width: 100%;
        margin-top: 10px;
        .state {
            width: 40px;
            height: 20px;
            background: #AAA;
            border-radius: 10px;
            margin: 0 auto;
            position: relative;
            cursor: pointer;
            .dot {
                width: 16px;
                height: 16px;
                background: #fff;
                border-radius: 50%;
                position: absolute;
            }
            .dot_left {
                left: 2px;
                top: 2px;
            }
            .dot_right {
                right: 2px;
                top: 2px;
            }
        }
        .active {
            background: #0147fd;
        }
    }
    .paginationVue {
        width: 100%;
        height: 60px;
    }
}    

</style>